<template>
  <div class="home_container">
    <el-header>
      <!-- 顶部导航区域 -->
      <div class="header_top">
        <ul class="header_top_left">
          <li class="header_address">江西</li>
          <li class="el-icon-location"></li>
        </ul>
        <ul class="header_top_right">
          <li class="el-icon-shopping-cart-2"></li>
          <li class="myCart">购物车</li>
          <li @click="toLogin">登录</li>
          <li @click="toRegister">注册</li>
        </ul>
      </div>
      <!-- 搜索区域 -->
      <div class="search_box">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
          <img src="../assets/logo_text.png" class="logo_text" />
        </div>
        <!-- 搜索框 -->
        <el-input class="search_input" placeholder="请输入内容"
          ><el-button
            slot="append"
            icon="el-icon-search"
            class="search_btn"
            @click="btn"
          ></el-button
        ></el-input>
      </div>
    </el-header>
    <el-main>
      <!-- 主体头部 -->
      <div class="main_header">
        <!-- 分类区域 -->
        <div class="classify">
          <ul>
            <li>数码产品</li>
            <li>鞋类</li>
            <li>箱包</li>
            <li>服饰</li>
            <li>玩具器材</li>
            <li>乐器</li>
            <li>图书资料</li>
            <li>美妆</li>
          </ul>
        </div>

        <!-- 轮播图 -->
        <div class="swiper">
          <el-carousel height="500px">
            <el-carousel-item v-for="(item, i) in swiperImg" :key="i">
              <img :src="item" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 资讯 -->
        <div class="news">
          <img
            src="https://tse1-mm.cn.bing.net/th/id/OIP-C.OSFUl0qjjIYaKOJEAO3TvQHaET?w=300&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
            alt=""
          />
          <div class="news_list">
            <ul>
              <li>阿巴阿巴阿巴阿巴阿巴阿巴...</li>
              <li>阿巴阿巴阿巴阿巴阿巴阿巴...</li>
              <li>阿巴阿巴阿巴阿巴阿巴阿巴...</li>
              <li>阿巴阿巴阿巴阿巴阿巴阿巴...</li>
              <li>阿巴阿巴阿巴阿巴阿巴阿巴...</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 推荐楼层 -->
      <div class="recommend">
        <div class="goods_item" v-for="item in box"></div>
      </div>
    </el-main>
    <el-footer>
      <div class="links">
        关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机易毛 |
        友情链接 | 销售联盟 | 易毛社区 | 易毛公益 | English Site | Contact U
      </div>
      <div class="copyright">
        地址：江西省南昌市江西农业大学软件学院 邮编：xxxxxx 电话：xxx-xxx-xxxx
        传真：xxxxxxxxxxxx 邮箱: xxxxxxxxxx.cn,
        赣ICP备xxxxxxxx号赣公网安备xxxxxxxxxxx
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      querySearch: 'hao',
      box: 15,
      swiperImg: [
        'https://img13.360buyimg.com/pop/s1180x940_jfs/t1/176969/25/10797/48391/60d3e4feE691df4aa/5a3da87d6714b7cf.jpg.webp',
        'https://img10.360buyimg.com/pop/s1180x940_jfs/t1/212503/18/486/86493/6169311bE092c4f3e/86649daeb3ab6d07.jpg.webp',
        'https://imgcps.jd.com/ling4/100018902024/5L2g5oOz6KaB55qE5omL5py6/54iG5qy-55u06ZmN/p-5bd8253082acdd181d02fa0f/ea2dd6c6/cr/s/q.jpg',
        'https://imgcps.jd.com/ling4/100020710438/5LyB5Lia5pqW5b-D5a2j/5a6255S16LaF57qn55yB/p-5bd8253082acdd181d02f9f2/3e773447/cr/s/q.jpg',
      ],
    }
  },
  methods: {
    btn() {
      console.log('hi')
    },
    toRegister() {
      this.$router.push('/register')
    },
    toLogin() {
      this.$router.push('/login')
    },
  },
}
</script>

<style lang="less" scoped>
.home_container {
  height: 1996px;
  background-color: #f4f4f4;
  padding: 0;

  .el-header {
    height: 196px !important;
    padding: 0;
    background-color: #ffffff;

    .header_top {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #eee;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 100px;
      padding-right: 100px;
      font-size: 14px;

      .header_top_left {
        display: flex;
        justify-content: space-around;
        vertical-align: bottom;
        cursor: pointer;

        .header_address {
          width: 40px;
        }

        .el-icon-location {
          color: #c00000;
          margin-top: 3px;
        }
      }

      .header_top_right {
        display: flex;
        justify-content: space-around;

        li {
          padding: 0 20px;
          cursor: pointer;

          &:hover {
            color: red;
          }
        }

        .el-icon-shopping-cart-2 {
          color: red;
          margin-top: 3px;
          margin-right: -10px;
        }
      }
    }

    .search_box {
      margin-left: 100px;
      margin-right: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .logo {
        width: 100px;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
        }

        .logo_text {
          margin-top: -50px;
        }
      }

      .search_input {
        width: 500px;
      }
    }
  }

  .el-main {
    height: 1600px;
    width: 1200px;
    padding: 0;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #fff;

    .main_header {
      display: flex;
      justify-content: space-between;
      height: 500px;

      .classify {
        width: 25%;

        ul {
          display: flex;
          flex-direction: column;
          height: 100%;

          li {
            height: 12.5%;
            padding-left: 20px;
            line-height: 62.5px;
            cursor: pointer;

            &:hover {
              background-color: #e7e4e4;
            }
          }
        }
      }

      .swiper {
        width: 55%;
        background-color: #f4f4f4;
      }

      .news {
        width: 20%;
        height: 100%;

        img {
          width: 100%;
          height: 40%;
        }

        .news_list {
          height: 60%;
          padding-top: 60px;

          ul {
            height: 100%;

            li {
              padding-left: 15px;
              height: 45px;
              line-height: 45px;
            }
          }
        }
      }
    }

    .recommend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      height: 1100px;
      background-color: #f4f4f4;

      .goods_item {
        width: 232px;
        height: 350px;
        margin-right: 10px;
        background-color: #fff;
      }

      .goods_item:nth-child(5n) {
        margin-right: 0;
      }
    }
  }

  .el-footer {
    height: 200px !important;
    background-color: #fff;
    text-align: center;
    padding-top: 70px;
    font-size: 15px;
    color: #747272;

    .links {
      cursor: pointer;
      border-top: 1px solid #9e9b9b;
      padding-top: 20px;
    }

    .copyright {
      margin-top: 25px;
    }
  }

  .el-carousel__item {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>
